
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js"></script>
    <script type="text/javascript" src="usa-statemap.js"></script>
    
    <script type="text/javascript">
      google.load("visualization", "1", {packages:['table']});
      // Set callback to run when API is loaded
      google.setOnLoadCallback( drawVisualization); 
      
      function drawVisualization() {
      // To see the data that this visualization uses, browse to
      // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ  
      var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?range=A3:B53&headers=-1&key=0AjxPF6eFePigdGxXTnRSWVhWRkZuNHNjUWJ5eU5iaGc&gid=0');
  
      // Send the query with a callback function.
    query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

    
      // Add more data rows and cells here
       var data = response.getDataTable();
 

        // Instantiate our table object.
        var vis = new attunet.USAStateMap(document.getElementById('usstatemap_div'));    
        // Draw our table with the data we created locally.
        vis.draw(data, {isDataColor: false, color:{1:"red",0:"blue"}});
        
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: false});

    }  
   </script>
  <title>USA Statemap</title></head>
<body>
  
  <P align="center">
  <B> Blue and Red US State Map</B></br>
  </BR>
  Sample Page for USA StateMap Visualization Gadget. This Displays Red and Blue Map based on Input of 0 or 1.
  
  </p>
  <table border="0" cellpadding="3px" cellspacing="3px">
      <tr>
      <TH>Data Table</TH>
      <TH> USA State Map</TH>
      </tr>
       <tr>
      <td width="30%" valign="top"> 
        <div id="table_div" style="overflow: auto;">
         </div>
      </td>
      <td width="70%" valign="top""> 
        <div id="usstatemap_div" style="overflow: auto;">
         <img src="http://www.google.com/ig/images/spinner.gif" />
          </div>
      </td>
    </tr>
  </table>


</body>
</html>

